<template>
<section style="background: transparent;padding: 0;">
    <!-- <div :id="echarsId" style="width:100%; height:135px;"></div> -->
    <div :id="echarsId" style="width:100%; height:11vh;"></div>
</section>
</template>

<script>
import echarts from "echarts";
export default{
    props:{
        charlist:{
          type:'Object',
          required: true,
          default:{}
        },
        seriesName:{
          type:'String',
          required: true,
          default:''
        },
        echarsId:{
          type:'String',
          required: true,
        },
        nolineName:{
          type:'String',
          default:'name'
        },
        offlineName:{
          type:'String',
          default:'name'
        },
    },
    data(){
        return{
          vertical:''
        }
    },
    mounted(){
      console.log(this.charlist)
      this.drawvertical()
      window.addEventListener('resize', ()=> {
          this.vertical.resize();
      })
    },
    methods:{
        //在线离线
      drawvertical() {
        // console.log(this.charlist)
        this.vertical = echarts.init(document.getElementById(this.echarsId));
        this.vertical.setOption({
          // grid: {
          //   x: '10%',
          //   y: '19%',
          //   height: '60%'
          // },

          tooltip: {
            // position: 'right',
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          series: [{
            // name: "设备在线数统计",
            name: this.seriesName,
            type: "pie",
            radius: ["50%", "85%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "14",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              color: function (params) {
                //自定义颜色
                var colorList = [
                  '#00ff9c', '#dfdfdf', '#FCCE10', '#E87C25', '#27727B',
                  '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                  '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                ];
                return colorList[params.dataIndex]
              }

            },
            data: [
              {
                value: this.charlist.onlineCount,
                // name: "在线设备"
                name: this.nolineName
              },
              {
                value: this.charlist.offlineCount,
                // name: "离线设备"
                name: this.offlineName
              }
            ]
          }]
        });
      },
    }
}
</script>

<style>

</style>